﻿/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
	background: #000 url(HooIzDat-logo-300-gs-trans.png) no-repeat 5px 35px;
	font-size: .75em;
	font-family: Verdana, Helvetica, Sans-Serif;
	margin: 0;
	padding: 0;
	color: #fff;
}

a, a:link, a:visited {
	color: #00994a;
	text-decoration: none;
}
a:hover, a:active {
	color: #ffc31d;
	text-decoration: underline;
}

p, ul {
	margin-bottom: 20px;
	line-height: 1.6em;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-size: 1.5em;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
}

h1 {
	font-size: 2em;
	padding-bottom: 0;
	margin-bottom: 0;
}
h2 {
	padding: 0 0 10px 0;
}
h3 {
	font-size: 1.2em;
}
h4 {
	font-size: 1.1em;
}
h5, h6 {
	font-size: 1em;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
	margin-top: 0;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
	
}

#header {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 35px;
	background: #50a438 url(header-bg.gif) repeat-y;
	color: #fff;
}
	
	#header h2 {
		margin: 0; padding: 0;
		float: left;
		color: #ffc31d;
		text-shadow: 0 0 10px #999;
	}
	
#main {
	margin: 35px 0 0;
	_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}

#footer {
	color: #999;
	padding: 10px 0;
	text-align: center;
	line-height: normal;
	margin: 0;
	font-size: .9em;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu {
	border-bottom: 1px #5C87B2 solid;
	padding: 0 0 2px;
	position: relative;
	margin: 0;
	text-align: right;
}

ul#menu li {
	display: inline;
	list-style: none;
}

ul#menu li#greeting {
	padding: 10px 20px;
	font-weight: bold;
	text-decoration: none;
	line-height: 2.8em;
	color: #fff;
}

ul#menu li a {
	padding: 10px 20px;
	font-weight: bold;
	text-decoration: none;
	line-height: 2.8em;
	background-color: #e8eef4;
	color: #034af3;
}

ul#menu li a:hover {
	background-color: #fff;
	text-decoration: none;
}

ul#menu li a:active {
	background-color: #a6e2a6;
	text-decoration: none;
}

ul#menu li.selected a {
	background-color: #fff;
	color: #000;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/



/* TABLE
----------------------------------------------------------*/

table {
	border: solid 1px #e8eef4;
	border-collapse: collapse;
}

table td {
	padding: 5px;
	border: solid 1px #e8eef4;
}

table th {
	padding: 3px 5px;
	text-align: left;
	background-color: #e8eef4;
	border: solid 1px #e8eef4;
}

/* MISC  
----------------------------------------------------------*/
.clear {
	clear: both;
}

.error {
	color: Red;
}

#menucontainer {
	margin-top: 40px;
}

div#title {
	display: none;
}

#logindisplay {
	position: absolute;
	height: 25px;
	line-height: 23px;
	padding: 5px;
	right: 0;
	top: 0;
	display: block;
	text-align: right;
	color: White;
}

#logindisplay a:link {
	color: white;
	text-decoration: underline;
}

#logindisplay a:visited {
	color: white;
	text-decoration: underline;
}

#logindisplay a:hover {
	color: white;
	text-decoration: none;
}

.field-validation-error {
	color: #ff0000;
}

.input-validation-error {
	border: 1px solid #ff0000;
	background-color: #ffeeee;
}

.validation-summary-errors {
	font-weight: bold;
	color: #ff0000;
}

input[type=submit],
a.button,
a.button:link,
a.button:active,
a.button:visited {
	background: #00994a;
	border: solid 1px #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 2px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 4px #333;
	cursor: pointer;
}
a.button {
	display: inline-block;
	padding: 5px 6px;
}
input[type=submit]:hover,
a.button:hover {
	border-color: #ffe184;
	color: #ffe184;
	text-decoration: none;
}

#header .content {
	padding: 8px 10px;
}
#header .content p {
	margin: 0;
}
#header .content .message {
	float: left;
	margin: 0 0 0 10px;
}
#header .content .time,
#header .content form {
	float: left;
}

#header input {
	margin: 0 0 0 20px;
	border: solid 1px #482a2a;
	background: #999;
	color: #000;
	text-shadow: none;
	font-weight: normal;
}
#header input:hover {
	text-shadow: 1px 1px 0px #ccc;
}

#main h2 {
	display: none;
}

.tile {
	border: solid 2px #fff;
	background: #ffc31d;
	width: 107px;
	height: 131px;
	padding: 14px 5px;
	text-align: center;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
	.tile .inner {
		position: relative;
	}
	.tile img, .tile input[type=image] {
		border: solid 1px #aaa;
	}
	.tile .name, .tile .info {
		width: 95px;
		position: absolute;
		bottom: 3px;
		left: 6px;
		margin: 0;
		padding: 2px 0;
		text-align: center;
		font-size: 12px;
		line-height: 1.1em;
		color: #fff;
		font-family: "Myriad Pro" , Arial, Sans-Serif;
		background-color: rgba(0,0,0,0.5);
	}
	.tile .info {
		display: none;
	}

	.tile.active.open:hover {
		border-color: #f06e2c;
		background: #fff;
		-moz-box-shadow: 0 0 1em #fff;
		-webkit-box-shadow: 0 0 1em #fff;
	}
	.tile.active.open:hover input[type=image] {
		border-color: #59861f;
	}
	.tile input[type=image],
	.tile input[type=image]:focus,
	.tile input[type=image]:active {
		-moz-outline-style: none;
	}
	.tile.active.open:hover .name {
		display: none;
	}
	.tile.open:hover .info {
		display: block;
	}
	
	.tile.closed {
		background: #ddd url("HooIzDat-logo-100-trans.png") no-repeat center center;
	}

	.tile.closed .inner {
		visibility: hidden;
	}

	.no-js .tile.closed:hover {
		background-image: none;
	}
		.no-js .tile.closed:hover .inner {
			visibility: visible;
			opacity: 0.8;
		}
		.no-js .tile.closed:hover .name {
			opacity: 1;
		}
		

#tiles {
	
}
#tiles.black-out {
	opacity: 0.25;
}
#tiles h3 {
	display: none;
}
#tiles ol {
	margin: 0 auto;
	padding: 0;
	width: 900px;
	text-align: center;
}
#tiles li {
	display: inline-block;
	list-style-type: none;
	margin: 6px 10px;
}
#tiles.black-out .tile.closed:hover {
	background-image: url("HooIzDat-logo-100-trans.png");
}
#tiles.black-out .tile.closed:hover * {
	visibility: hidden;
}

#playersCharacter {
	text-align: center;
}

#playersCharacter .tile {
	margin: 0 auto;
}

.players {
	padding: 3px 4px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: solid 1px #ffc31d;
	background-color: #483f25; /* #ffc31d */
	color: #bbb;
	font-size: 11px;
}
.players.my-turn {
	border-color: #00994a;
	background-color: #175434; /* #00994a */
}
	.players h3 {
		margin: 0;
		font-size: 12px;
		text-transform: uppercase;
		color: #ffc31d;
	}
	.players.my-turn h3 {
		
	}
	.players ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	.players .active {
		color: #fff;
		text-shadow: 0 0 8px #ffc31d;
	}

#actionBar {
	height: 68px;
	border-top: solid 2px #333;
	background: #262626;
	position: fixed;
	bottom: 0;
	width: 100%;
}

	#actionBar .logo {
		position: absolute;
		right: 6px;
		top: 6px;
	}
	
	#actionBar .players {
		position: absolute;
		left: 4px; top: 4px;
	}
	
	#actionBar #myCharacter {
		position: absolute;
		left: 120px; bottom: 5px;
	}
	
		#actionBar #myCharacter h3 {
			display: none;
		}
	
		#actionBar #myCharacter .tile {
			width: auto;
			height: 54px;
			padding: 0;
			background: #fff;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			}
			#actionBar #myCharacter .tile .inner {
				
			}
			#actionBar #myCharacter .tile img {
				height: 54px;
				border: none 0;
			}
			#actionBar #myCharacter .tile .name {
				display: none;
				left: 0;
				bottom: 2px;
			}
			
		.no-js #actionBar #myCharacter:hover {
			
		}
			.no-js #actionBar #myCharacter:hover .tile {
				width: auto;
				height: 127px;
			}
				.no-js #actionBar #myCharacter:hover .tile img {
					height: auto;
				}
				.no-js #actionBar #myCharacter:hover .tile .name {
					display: block;
				}
	
	#actionBar .action-panel {
		width: 600px;
		margin: 0 auto;
	}
	
		#actionBar .action-panel > .inner > h3 {
			display: none;
		}
		
		#actionBar .action-panel .body p {
			text-align: center;
			margin: 0;
		}
		
		#actionBar .action-panel .body .info {
			margin: 4px 40px 0;
			border: solid 1px #5c4500;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			padding: 0 0 2px;
			font-size: 14px;
			background: #2f2b20;
			color: #fff4d2;
		}
		
		#actionBar .action-panel .body form {
			color: #fff;
		}
		
		#actionBar .action-panel .body form,
		#actionBar .action-panel .body form select,
		#actionBar .action-panel .body form input,
		.dialog > .inner > .actions a {
			font-size: 22px;
		}
		
		#actionBar .action-panel .body form p {
			line-height: 1.2em;
			margin: 0 0 0.3em;
		}
		
		#actionBar .action-panel .body form label {
			display: none;
		}
		
		#actionBar .action-panel .body form select {
			background: #232323;
			color: #fff;
			border: solid 2px #333;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
		}
		
		#actionBar .action-panel .body div.answered form {
			float: right;
		}
		
		#actionBar .action-panel .body p.answer {
			color: #fff;
			font-size: 18px;
		}
		
.dialog, .panel {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 400px;
	margin-top: -180px;
	margin-left: -200px;
	background: #262626;
	border: solid 3px #f06e2c;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-box-shadow: 3px 3px 5px #000;
	-webkit-box-shadow: 3px 3px 5px #000;
}

	.dialog > .inner {
		
	}
	
	.dialog .header > h3,
	.panel .header > h3 {
		margin: 0;
		padding: 5px 0;
		background: #f06e2c;
		font-size: 18px;
		text-align: center;
		text-shadow: 0 0 5px #333;
	}
	
	.dialog > .inner > .body,
	.panel > .inner > .body {
		border: solid 1px #4f4f4f;
		padding: 5px 20px;
	}
	
	.dialog > .inner > .body p,
	.panel > .inner > .body p {
		margin: 0; padding: 0;
	}
	
	.dialog > .inner > .body .info {
		color: #fff;
		font-size: 22px;
		text-align: center;
	}
	
	.dialog .actions {
		padding: 10px;
		background: #4f4f4f;
		-moz-border-radius: 0 0 6px 6px;
		-webkit-border-bottom-left-radius: 6px;
		-webkit-border-bottom-right-radius: 6px;
		text-align: center;
	}

#home, #lobby {
	text-align: center;
	padding: 20px 20px 0;
}
	
	#home .validation-summary {
		position: absolute;
		top: 380px;
		left: 405px;
		padding: 0; margin: 0;
		width: 500px;
	}
	
		#home .validation-summary ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
	
	#home .welcome {
		display: inline-block;
		width: 300px;
		padding: 0 0 120px;
		background: url(fanned-tiles.png) no-repeat center bottom;
		text-align: center;
	}
		
		#home .welcome img {
			float: left;
		}
		
		#home .welcome h3 {
			font-size: 16px;
			margin: 15px 0 25px 150px;
		}
		
			#home .welcome h3 strong {
				text-transform: uppercase;
				color: #f06e2c;
			}
		
		#home .welcome p {
			margin: 0 0 10px;
			font-size: 14px;
			text-shadow: 2px 2px 1px #000;
		}
	
	#home .panel,
	#lobby .panel {
		position: static;
		width: 250px;
		height: auto;
		left: auto; top: auto;
		margin: 0 10px;
		display: inline-block;
		vertical-align: top;
	}

		#home .panel .body,
		#lobby .panel .body {
			height: 270px;
			padding-left: 15px;
			padding-right: 15px;
			-moz-border-radius: 0 0 8px 8px;
			-webkit-border-bottom-left-radius: 8px;
			-webkit-border-bottom-right-radius: 8px;
		}
			
			#home .panel .body fieldset {
				margin: 10px 0 0;
				padding: 0;
				border: 0 none;
				text-align: left;
			}

			#home .panel .body fieldset p {
				margin: 2px 12px 2px 10px;
				line-height: 1.1em;
			}

			#home .panel .body fieldset label {
				display: block;
				margin: 0 0 4px;
			}
			
			#home .panel .body fieldset input.input-validation-error {
				border: dashed 1px #ff0000;
			}

			#home .panel .body legend {
				display: none;
			}

			#home .panel .body input[type="text"],
			#home .panel .body input[type="password"] {
				width: 180px;
				margin: 0 0 4px;
				border: 1px solid #CCC;
			}

			#home .panel .body input[type="text"]:focus,
			#home .panel .body input[type="password"]:focus {
				border-color: #f06e2c;
			}
			
			#home .panel .body .checkbox label {
				display: inline;
			}
			
			#home .panel .body input[type="submit"] {
				margin-top: 10px;
			}
			
		#lobby .panel .body .none {
			margin: 15px;
			border: solid 1px #ffc31d;
			padding: 2px 3px;
			color: #ffc31d;
		}
		
		#lobby .panel .body ul,
		#lobby .panel .body form {
			margin: 5px 0 0;
		}
		
		#lobby .panel .body table {
			width: 100%;
			margin: 5px 0 0;
		}
		
			#lobby .panel .body table th {
				text-align: center;
				background: #00582b;
				color: #fff;
			}
			
			#lobby .panel .body table th,
			#lobby .panel .body table td {
				border-color: #00582b;
			}
	
	#lobby .pending-games ul {
		margin: 0; padding: 0;
		list-style-type: none;
	}
		#lobby .pending-games ul input {
			margin-left: 5px;
		}
	
.dialog.answer-required .my-character h4,
.dialog.wrong-guess .wrong-character h4,
.dialog.winner .character h4,
.dialog.loser .character h4 {
	display: none;
}
.dialog.answer-required .my-character .tile,
.dialog.wrong-guess .wrong-character .tile,
.dialog.winner .character .tile,
.dialog.loser .character .tile {
	margin: 10px auto;
}
	.dialog.answer-required .my-character .tile .name,
	.dialog.wrong-guess .wrong-character .tile .name,
	.dialog.winner .character .tile .name,
	.dialog.loser .character .tile .name {
		bottom: 1px;
	}
.dialog.answer-required .question-mark {
	position: absolute;
	bottom: 40px;
	right: -50px;
	width: 124px;
	height: 198px;
	background: url(dialog-question-mark.png) no-repeat;
}
.dialog.wrong-guess .cross {
	position: absolute;
	left: 145px;
	bottom: 62px;
	width: 116px;
	height: 157px;
	background: url(cross.png) no-repeat;
}

.js #waitingRefreshLink {
    display: inline-block;
    text-indent: -9999px;
    width: 16px; height: 18px;
    background: url(spinner-small.gif) no-repeat left 2px;
}

.js .actions #waitingRefreshLink {
    border: none 0;
    width: 32px; height: 32px;
    background: url(spinner.gif) no-repeat left 2px;
}

#prize {
    padding: 20px 80px;
}

    #prize .readify-logo {
        float: right;
        margin: 20px;
    }

/* ---- jQuery.KeyTips ---- */
  
.KeyTips__highlighted {
    color: Navy;
    background-color: #fdda8d;
}

.KeyTips__popup {
	position: absolute;
	width: 16px;
	height: 17px;
	overflow: hidden;
	line-height: 17px;
	background: #f3f3f8 url('popup-back.gif') left top no-repeat;
	color: #4c4c4c;
	font-family: "Lucida Sans", Verdana, Sans-Serif;
	font-size: 11px;
	text-align: center;
	cursor: default;
	display: none;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
	opacity: 0.8;
}

* html .akh__popup { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); }
*:first-child+html .akh__popup { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); }

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label,
.display-field,
.editor-field
{
    margin: 0.5em 0;
}

.text-box
{
    width: 30em;
}

.text-box.multi-line
{
    height: 6.5em;
}

.tri-state
{
    width: 6em;
}

div.account 
{
    padding: 10px;    
}